import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Button, Layout, Menu, theme, Drawer } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import { homeRoutes } from '../../router';
import withLogin from '../../hoc/withLogin';
const { Header, Content, Footer, Sider } = Layout;
const username = localStorage.getItem('username')
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
// const items = [
//   getItem('Option 1', '1', <PieChartOutlined />),
//   getItem('Option 2', '2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];
const App = () => {
    const randerHome = (arr) => {
        const items = []
        arr && arr.forEach((item, index) => {
            if (item.children) {
                items.push(getItem(<NavLink to={`${item.path}?title=${item.title}`}>{item.title}</NavLink>, item.path, item.icon, randerHome(item.children)))
            } else {
                items.push(getItem(<NavLink to={`${item.path}?title=${item.title}`}>{item.title}</NavLink>, item.path, item.icon,))
            }
        })
        return items
    }
    const items = randerHome(homeRoutes)
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const change = () => {
        document.body.classList.toggle('dark')
    }
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    return (

        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }} />
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        欢迎  {username}  登录
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet></Outlet>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    <Button type="primary" onClick={showDrawer}>
                        Open
                    </Button>
                    <Drawer
                        title="切换主题"
                        closable={{ 'aria-label': 'Close Button' }}
                        onClose={onClose}
                        open={open}
                    >
                       <button onClick={change}>切换主题</button>
                    </Drawer>
                </Footer>
            </Layout>
        </Layout>
    );
};
export default withLogin(App);